<template>
  <a-table
    :loading="loading"
    :dataSource="data"
    :columns="columns"
    :pagination="pagination"
    size="middle"
    @change="handleTableChange"
    width="300"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'isLock'">
        <a-tag v-if="record.isLock === '0'" color="cyan">正常</a-tag>
        <a-tag v-else color="red">锁定</a-tag>
      </template>
      <template v-if="column.key === 'operation'">
        <!-- <a-button class="button-interval" type="link" :icon="h(FileTextOutlined)" size="small">
              查看
            </a-button> -->
        <a-button
          class="button-interval"
          type="link"
          :icon="h(SettingOutlined)"
          size="small"
          @click="handleSetting(record)"
        >
          角色
        </a-button>
        <a-button
          class="button-interval"
          type="link"
          :icon="h(DeleteOutlined)"
          size="small"
          @click="handleDeleteUser(record)"
        >
          删除
        </a-button>
      </template>
    </template>
  </a-table>
</template>

<script lang="ts">
  import { computed, defineComponent, unref, reactive, watch, toRefs, ref } from 'vue'
  export default defineComponent({
    name: 'BaseTitle',
    props: {
      columns: { type: Array, default: [] as any },
      data: { type: Array, default: [] as any },
      loading: { type: Boolean, default: false },
      pagination: { type: Object, default: {} as any },
      list: { type: Function, default: () => {} },
    },
    emits: ['menuClick'],
    setup(props, { emit }) {
      async function handleTableChange(key) {
        const { pagination } = props
        emit('menuClick', key)
      }
      return {}
    },
    handleTableChange(page) {
      this.props.pagination.value.current = page.current
      this.props.list()
    },
  })
</script>

<style lang="scss" scoped>
  .m-title {
    position: relative;
    font-size: 16px;
    font-weight: bold;
    padding-left: 14px;
  }
  .m-title::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 18px;
    top: 50%;
    transform: translatey(-50%);
    left: 0;
    background-color: #0960bd;
    border-color: black;
    border-style: dotted;
  }
</style>
